<template>
  <div class="today-promise">
    <item-title title="今日承诺" />
    <div class="legend">
      <span
        class="legend-item"
        v-for="item in legend"
        :key="item.type"
        :data-num="item.value"
        :style="{ color: item.color }"
      >
        <i>{{ item.label }}</i>
      </span>
    </div>
  </div>
</template>

<script>
import ItemTitle from "@/components/itemTitle";
const colors = ["#1B91F4", "#F7B115", "#00B983"];
export default {
  name: "TodayPromise",
  components: { ItemTitle },
  data() {
    return {
      legend: [
        { label: "运行装置", value: 0, type: "run", color: colors[0] },
        { label: "检修装置", value: 0, type: "inspect", color: colors[1] },
        { label: "停产装置", value: 0, type: "stop", color: colors[2] },
      ],
    };
  },
};
</script>

<style lang="scss">
@import "../../../styles/variable";
.today-promise {
  position: relative;
  margin-bottom: 18px;
  .promise-level {
    position: absolute;
    top: 8px;
    right: 8px;
    text-align: right;
    padding-left: 30px;
    width: 66px;
    height: 24px;
    line-height: 24px;
    font-size: 16px;
    /* background: url("../../../../assets/imgs/promise.svg") no-repeat; */
    color: #f7b115;
    background-size: contain;
  }
  .bar-wrapper {
    width: 100%;
    height: 200px;
  }
  .intro {
    line-height: 20px;
    .text {
      color: #e2f5fd;
      font-size: 14px;
      margin-bottom: 4px;
      max-height: 100px;
      overflow-y: auto;
    }
    .who {
      span {
        color: #fff;
        display: block;
        text-align: right;
        /* opacity: 0.6; */
      }
    }
  }
  .legend {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 48px;
    margin-bottom: 20px;
    margin-top: 42px;
    .legend-item {
      display: block;
      text-align: center;
      width: 80px;
      height: 34px;
      font-size: 14px;
      line-height: 34px;
      /* background: url("../../../../assets/imgs/trapezoid-bg.svg") no-repeat; */
      background-size: 100% 100%;
      position: relative;
      &:after {
        font-family: $--num-font;
        content: attr(data-num);
        position: absolute;
        top: -22px;
        left: 50%;
        font-size: 24px;
        transform: translateX(-50%);
      }
      i {
        color: $--color-font;
      }
    }
  }
}
</style>
